<template>
	<view class="myParte">
		<!-- <navCom navName="我的伙伴" @previous="previous"></navCom> -->
		<view class="myParte_car_box">
			<view class="myParte_car_box_num">
				<view class="myParte_car_jine">{{totalPartner||0}}</view>
				<view class="myParte_car_txt">伙伴总数</view>
			</view>
			<view class="myParte_car_detail">
				<view class="myParte_car_detail_li">
					<view class="num">{{monthAddPartner||0}}</view>
					<view class="tlt my-mgt-2">本月新增</view>
				</view>
				<view class="myParte_car_detail_bg"></view>
				<view class="myParte_car_detail_li">
					<view class="num">{{nextLevelPartner||0}}</view>
					<view class="tlt my-mgt-2">直属伙伴</view>
				</view>
			</view>
		</view>
		<view class="big_box" v-if="dev.length > 0">
			<view class="detail_card my-mgt-15" v-for="(item,index) in dev" :key="index" @click="gohistory(item.id)">
				<view class="detail_card_phone my-pdlr-15">
					<view class="name">{{item.nickname}}</view>
					<view class="phone">{{item.phone}}</view>
				</view>
				<view class="detail_card_data my-mgb-15">
					<view class="detail_card_data_fir my-pdl-15">
						<view class="" style="flex-grow: 1;">
							<view class="txt">个人交易总额</view>
							<view class="jine my-mgt-3">{{item.personAmount||0}}</view>
						</view>
						<view class="" style="flex-grow: 1;">
							<view class="txt">伙伴交易总额</view>
							<view class="jine my-mgt-3">{{item.partnerAmount||0}}</view>
						</view>
						<view class="" style="flex-grow: 1;">
							<view class="txt">总交易</view>
							<view class="jine my-mgt-3">{{item.totalAmount||0}}</view>
						</view>
					</view>
					<view class="detail_card_data_two my-pdl-15">
						<view class="" style="flex-grow: 1;">
							<text class="nab-tot my-mgr-20">设备总数</text>
							<text class="jihuo">{{item.totalDevice||0}}</text>
						</view>
						<view class="" style="flex-grow: 1;">
							<text class="nab-tot my-mgr-20">已激活设备</text>
							<text class="jihuo">{{item.activationDevice||0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
	</view>
</template>

<script>
	import navCom from "@/components/navCom/navCom.vue";
	import {
		partnerdataApi,
		partnerlistApi
	} from "@/api/home.js"
	export default {
		components: {
			navCom,
		},
		data() {
			return {
				monthAddPartner: 0, //本月新增
				nextLevelPartner: 0, //直属伙伴
				totalPartner: 0, //伙伴总数
				pageIndex: 0,
				pageSize: 30,
				dev: [],
				total: 1,
			};
		},
		onLoad() {
			this.getPartnerData()
			this.partenerList()
		},
		// 上拉加载更多
		onReachBottom() {
			this.partenerList()
		},
		methods: {
			//伙伴列表
			async partenerList() {
				if (this.dev.length >= this.total){
					uni.showToast({
						title:"没有更多数据了",
						icon:"none"
					})
					return
				} 
				let params = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await partnerlistApi(params)
				if (res.statusCode === 200) {
					uni.hideLoading()
					if(res.data.data!==null){//whc 04-18 改动
						this.dev = [...this.dev, ...res.data.data.rows]
						this.total = res.data.data.total
						this.pageIndex++
					}
					
				}
			},
			// 获取信息
			async getPartnerData() {
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await partnerdataApi({})
				if (res.statusCode === 200) {
					uni.hideLoading()
					this.nextLevelPartner = res.data.data.nextLevelPartner
					this.monthAddPartner = res.data.data.monthAddPartner
					this.totalPartner = res.data.data.totalPartner
				}
			},
			// 历史记录
			gohistory(id) {
				uni.navigateTo({
					url: "/pages/main/childPages/historicalRecord?ids=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myParte {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;

		.myParte_car_box {
			width: 690rpx;
			height: 320rpx;
			margin: auto;
			background: linear-gradient(270deg, #9EAEC8 0%, #666E93 100%);
			border-radius: 20rpx;

			.myParte_car_box_num {
				width: 100%;
				height: 160rpx;

				.myParte_car_jine,
				.myParte_car_txt {
					width: 100%;
					text-align: center;
					color: #FFFFFF;
				}

				.myParte_car_jine {
					height: 65%;
					font-size: 60rpx;
					font-weight: 500;
					line-height: 145rpx;
				}

				.myParte_car_txt {
					height: 35%;
					line-height: 50rpx;
					font-size: 26rpx;
					font-weight: 400;
				}
			}

			.myParte_car_detail {
				width: 100%;
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.myParte_car_detail_li {
					width: 32.5%;
					height: 55%;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #FFFFFF;
					font-weight: 500;

					.num {
						font-size: 32rpx;

					}

					.tlt {
						font-size: 24rpx;
					}
				}

				.myParte_car_detail_bg {
					width: 1rpx;
					height: 32rpx;
					background: #FFFFFF;
				}
			}
		}

		.big_box {
			width: 690rpx;
			height: auto;
			min-height: 293rpx;
			margin: auto;
		}

		.detail_card {
			width: 690rpx;
			height: 293rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;

			.detail_card_phone {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.phone {
					font-size: 28rpx;
					font-weight: 500;
					color: #808080;
				}
			}

			.detail_card_data {
				width: 100%;
				height: 203rpx;
				background: #FBFAFA;
				box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(242, 242, 242, 0.35);
				border-radius: 0rpx 0rpx 20rpx 20rpx;

				.detail_card_data_fir {
					width: 100%;
					height: 60%;
					display: flex;
					align-items: center;
					justify-content: left;
					border-bottom: 1rpx solid #F2F2F2;

					.txt {
						font-size: 24rpx;
						font-weight: 500;
						color: #808080;
					}

					.jine {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
					}
				}

				.detail_card_data_two {
					width: 100%;
					height: 40%;
					display: flex;
					align-items: center;
					font-weight: 500;

					.nab-tot {
						font-size: 26rpx;
						color: #808080;
					}

					.jihuo {
						font-size: 26rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>
